<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.fullName"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="员工类别">
        <el-select v-model="form.userType" placeholder="请选择员工类别">
          <el-option label="在编" :value="0"></el-option>
          <el-option label="聘用" :value="1"></el-option>
          <el-option label="劳务派遣" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="岗位名称">
        <el-input v-model="form.postName"></el-input>
      </el-form-item>
      <el-form-item label="职称">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="确定更新吗？" @onConfirm="onSubmit">
          <el-button slot="reference" type="primary">更新</el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getUser, updateUser } from '@/api/user'
export default {
  props: {
    userId: {
      type: Number,
      default: 0
    }
  },
  watch: {
    userId(val) {
      this.loadData(val)
    }
  },
  data() {
    return {
      form: {
        fullName: '', gender: 0, phoneNumber: '', userType: '', postName: '', title: ''
      }
    }
  },
  mounted() {
    this.loadData(this.userId)
  },
  methods: {
    async loadData(id) {
      if (!id) {
        return
      }
      let loading = this.$$loading('正在加载...')
      let { data } = await getUser(id)
      Object.assign(this.form, data)
      loading.close()
      document.scrollingElement.scrollTop = 0
    },
    async onSubmit() {
      let loading = this.$$loading('请等待...')
      let {data} = await updateUser(this.form)
      loading.close()
      this.form.name = this.form.fullName
      this.$emit("change", this.form)
      this.$message.success('更新成功', '2000')
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
